<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./js/vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div class="head">
        <h3>图书管理界面</h3>
      </div>
      <div class="body">
        <div class="add">
          <span>图书数目：{{count}}</span>
          <label for="bookid">图书编号: &nbsp;</label>
          <input
            type="text"
            v-model="id"
            name=""
            id="bookid"
            placeholder="请输入编号"
            :disabled="flag"
          />
          <label for="book">添加书籍: &nbsp;</label>
          <input
            type="text"
            v-model="name"
            name=""
            id="book"
            placeholder="请输入书名"
            v-focus
          />

          <button class="btn" @click="add">添加</button>
        </div>
        <table>
          <tbody class="list">
            <tr>
              <th>序号</th>
              <th>图书编号</th>
              <th>书名</th>
              <th>入馆时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item,index) in books" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.id}}</td>
              <td>《{{item.name}}》</td>
              <td>{{item.date|myfilter }}</td>
              <td>
                <a href="#" @click.prevent="edit(item.id)">编辑</a>|<a
                  href="#"
                  @click.prevent="del(item.id)"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#app",
      data: { books: [], name: "", id: "", date: "", msg: "123", flag: false },
      methods: {
        add() {
          if (!this.name || !this.id) {
            alert("请输入完整信息");
            return;
          }
          if (this.flag) {
            //如果是编辑操作
            this.books.filter((item) => item.id == this.id)[0].name = this.name;
            return;
          }
          console.log(this.name);
          this.books.push({ id: this.id, name: this.name, date: +new Date() });
          console.log(this.books);
          this.flag = false;
          this.name = "";
          this.id = "";
        },
        del(id) {
          this.books = this.books.filter((item) => {
            return item.id !== id;
          });
        },
        edit(id) {
          this.flag = true;
          console.log(id);
          let arr = this.books.filter((item) => item.id == id);
          // let item=this.books.find((i)=>{
          //   i.id==id
          // })
          console.log(arr[0]);
          this.name = arr[0].name;
          this.id = arr[0].id;
        },
        editup() {},
      },
      directives: {
        focus: {
          inserted(el) {
            el.focus();
          },
        },
      },
      computed: {
        count() {
          return this.books.length;
        },
      },
      filters: {
        myfilter(value) {
          var date = new Date(value);
          Y = date.getFullYear() + "-";
          M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          D = date.getDate() + " ";
          h = date.getHours() + ":";
          m = date.getMinutes() + ":";
          s = date.getSeconds();
          return (Y + M + D + h + m + s);
          // return (
          //   value.getFullYear() +
          //   "-" +
          //   value.getMonth() +
          //   1 +
          //   "-" +
          //   value.getDate()
          // );
        },
      },
      mounted: function () {
        // 该生命周期钩子函数被触发的时候，模板已经可以使用
        // 一般此时用于获取后台数据，然后把数据填充到模板
        var data = [
          {
            id: 1001,
            name: "三国演义",
            date: 2525609975000,
          },
          {
            id: 1002,
            name: "水浒传",
            date: 2525609975000,
          },
          {
            id: 1003,
            name: "红楼梦",
            date: 2525609975000,
          },
          {
            id: 1004,
            name: "西游记",
            date: 2525609975000,
          },
        ];
        this.books = data;
      },
    });
  </script>
</html>
